import React, {Component} from 'react'
import {connect} from 'react-redux'
import {updateCart,deleteFromCart} from '../actions/cart-action'
import store from '../store.js';

class CartList extends Component  {
	constructor(props){
	  super(props);
	  this.state = {
	    count:0,
		payload:{
			product:'',
			quantity:'',
			unitCost:'',
		}
	  }
	}
	updateCart(){
		this.props.updateCart()
	}
	deleteFromCart(index){
		let cart = store.getState().shoppingCart.cart;
		let product = cart[index].product;
		store.dispatch(deleteFromCart(product))
	}
	render(){
		let cart = store.getState().shoppingCart.cart;
		return(
			<div>
				<h2 className="title-tips">购物清单</h2>
				<ul className="cart-list">
					{cart.map((it,index)=>{
						return (<li key={index} className="cart-item">
							<div className="info1">产品:{it.product} <span onClick={this.deleteFromCart.bind(this,index)} className="icon-delt">&times;</span></div>
							<div className="info2">单价:{it.unitCost} <em>规格:{it.quantity}</em></div>
						</li>)
					})}
				</ul>
			</div>
		)
	}
}
export default connect(
    state => ({
        products:state.products,
        cart:state.shoppingCart
    }),
    {updateCart,deleteFromCart}
)(CartList)